<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>分析页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../admin/css/other/analysis.css" />
</head>

<body>
    <div class="pear-container">
        <div class="layui-row layui-col-space25">
            <div class="layui-col-xs6 layui-col-md3">
                <div class="layui-card top-panel">
                    <div class="layui-card-header">总用户数</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value1">
                                0
                            </div>
                            <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                                <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
                                    <path d="M504.29 576.68c-150.17 0-272.35-122.93-272.35-274.03C231.95 153.42 354.12 32 504.29 32s272.33 121.42 272.33 270.65c0.01 151.1-122.16 274.03-272.33 274.03z m0-476.18c-112.4 0-203.84 90.69-203.84 202.15 0 113.33 91.45 205.53 203.84 205.53s203.83-92.19 203.83-205.53c0-111.46-91.43-202.15-203.83-202.15z" fill="#06265B"></path>
                                    <path d="M410.8 988.38H96.13c-18.92 0-34.25-15.33-34.25-34.25 0-245.82 198.46-445.81 442.4-445.81 18.92 0 34.25 15.33 34.25 34.25s-15.33 34.25-34.25 34.25c-194.72 0-355.16 151-372.37 343.05H410.8c18.92 0 34.25 15.33 34.25 34.25s-15.33 34.26-34.25 34.26z" fill="#06265B"></path>
                                    <path fill="var(--global-primary-color)" d="M756.99 637.76c-97.82 0-177.12 79.3-177.12 177.12S659.17 992 756.99 992s177.12-79.3 177.12-177.12H756.99V637.76z"></path>
                                    <path fill="var(--global-primary-color)" d="M785 609.76v177.12h177.12c0-97.82-79.3-177.12-177.12-177.12z"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6 layui-col-md3">
                <div class="layui-card top-panel">
                    <div class="layui-card-header">总订单数</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;"
                                id="value2">
                                0
                            </div>
                            <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="none">
                                    <path stroke="#06265B" stroke-width="1.5" d="M17.82 16.889a7 7 0 001.162-3.39A.473.473 0 0018.5 13h-6a.5.5 0 01-.5-.5v-6a.473.473 0 00-.5-.482 7 7 0 106.32 10.871z"/>
                                    <path stroke="var(--global-primary-color)" stroke-width="1.5" d="M19 11c.552 0 1.009-.45.917-.995a6 6 0 00-4.922-4.922C14.451 4.992 14 5.448 14 6v4a1 1 0 001 1h4z"/>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6 layui-col-md3">
                <div class="layui-card top-panel">
                    <div class="layui-card-header">总收入</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;"
                                id="value3">
                                0
                            </div>
                            <div class="layui-col-xs4 layui-col-md4  top-panel-tips">
                                <svg width="100" height="100" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="none">
                                    <path fill="#06265B" d="M511.87 113.99c54.03 0 106.41 10.57 155.67 31.4 47.62 20.14 90.41 49 127.17 85.76 36.76 36.76 65.61 79.55 85.76 127.17 20.84 49.26 31.4 101.64 31.4 155.67s-10.57 106.41-31.4 155.67c-20.14 47.62-48.99 90.41-85.76 127.17-36.76 36.76-79.55 65.61-127.17 85.76-49.26 20.84-101.64 31.4-155.67 31.4s-106.41-10.57-155.67-31.4c-47.62-20.14-90.41-48.99-127.17-85.76-36.76-36.76-65.61-79.55-85.76-127.17-20.84-49.26-31.4-101.64-31.4-155.67s10.57-106.41 31.4-155.67c20.14-47.62 49-90.41 85.76-127.17 36.76-36.76 79.55-65.61 127.17-85.76 49.26-20.84 101.63-31.4 155.67-31.4m0-80c-265.1 0-480 214.9-480 480s214.9 480 480 480 480-214.9 480-480-214.91-480-480-480z"></path>
                                    <path fill="var(--global-primary-color)" d="M689.52 271.97h-65.08c-3.67 0-7.04 2.01-8.79 5.23l-73.21 116.89c-7.48 14-13.82 26.16-19.08 36.56-3.7 7.32-14.14 7.32-17.84 0-19-37.57-49.63-76.96-91.53-153.49-1.75-3.2-5.12-5.2-8.77-5.2H336.4c-7.71 0-12.52 8.36-8.64 15.03l110.48 171.78c3.88 6.67-0.93 15.03-8.64 15.03h-70.16c-5.52 0-10 4.48-10 10v48.58c0 5.52 4.48 10 10 10h103c5.52 0 10 4.48 10 10v26.95c0 5.52-4.48 10-10 10h-103c-5.52 0-10 4.48-10 10v49.2c0 5.52 4.48 10 10 10h103c5.52 0 10 4.48 10 10V746c0 5.52 4.48 10 10 10h61.03c5.52 0 10-4.48 10-10v-77.47c0-5.52 4.48-10 10-10h98.64c5.52 0 10-4.48 10-10v-49.2c0-5.52-4.48-10-10-10h-98.64c-5.52 0-10-4.48-10-10v-26.95c0-5.52 4.48-10 10-10h98.64c5.52 0 10-4.48 10-10V483.8c0-5.52-4.48-10-10-10h-66.87c-7.73 0-12.54-8.4-8.62-15.07l111.51-171.71c3.93-6.65-0.88-15.05-8.61-15.05z"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6 layui-col-md3">
                <div class="layui-card top-panel">
                    <div class="layui-card-header">转换率</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;"
                                id="value4">
                                0
                            </div>
                            <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="none">
                                    <rect width="13.262" height="13.262" x="5.369" y="6.554" stroke="#06265B" stroke-width="1.5" rx="6.631"/>
                                    <path stroke="var(--global-primary-color)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12.018 13.185V8.908"/>
                                    <path stroke="var(--global-primary-color)" stroke-linecap="round" stroke-width="1.5" d="M10.5 4.185h3"/>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-row">
                            <div class="layui-col layui-col-md8">
                                <div id="echarts1" style="height:400px;"></div>
                            </div>
                            <div class="layui-col layui-col-md4">
                                <div id="echarts2" style="height:400px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md9">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <dl class="dynamic-status">
                            <dd>
                                <div class="dynamic-status-img"><a href="javascript:;"><img
                                            style="width: 32px;height: 32px;border-radius: 50px;"
                                            src="../../admin/images/avatar.jpg"></a></div>
                                <div>
                                    <p>就眠儀式 在 <a style="color: var(--global-primary-color)"
                                            lay-href="https://gitee.com/pear-admin/Pear-Admin-Layui">讨论区</a> 回答了 <a style="color: var(--global-primary-color)"
                                            lay-href="https://gitee.com/pear-admin/Pear-Admin-Layui">夏娜</a> 提出得问题
                                    </p>
                                    <span>昨天</span>
                                </div>
                            </dd>
                            <dd>
                                <div class="dynamic-status-img"><a href="javascript:;"><img
                                            style="width: 32px;height: 32px;border-radius: 50px;"
                                            src="../../admin/images/avatar.jpg"></a></div>
                                <div>
                                    <p>就眠儀式 在 <a style="color: var(--global-primary-color)"
                                            lay-href="https://gitee.com/pear-admin/Pear-Admin-Layui">讨论区</a> 回答了 <a style="color: var(--global-primary-color)"
                                            lay-href="https://gitee.com/pear-admin/Pear-Admin-Layui">夏娜</a> 提出得问题
                                    </p>
                                    <span>昨天</span>
                                </div>
                            </dd>
                            <dd>
                                <div class="dynamic-status-img"><a href="javascript:;"><img
                                            style="width: 32px;height: 32px;border-radius: 50px;"
                                            src="../../admin/images/avatar.jpg"></a></div>
                                <div>
                                    <p>就眠儀式 在 <a style="color: var(--global-primary-color)"
                                            lay-href="https://gitee.com/pear-admin/Pear-Admin-Layui">讨论区</a> 回答了 <a style="color: var(--global-primary-color)"
                                            lay-href="https://gitee.com/pear-admin/Pear-Admin-Layui">夏娜</a> 提出得问题
                                    </p>
                                    <span>昨天</span>
                                </div>
                            </dd>
                            <dd>
                                <div class="dynamic-status-img"><a href="javascript:;"><img
                                            style="width: 32px;height: 32px;border-radius: 50px;"
                                            src="../../admin/images/avatar.jpg"></a></div>
                                <div>
                                    <p>就眠儀式 在 <a style="color: var(--global-primary-color)"
                                            lay-href="https://gitee.com/pear-admin/Pear-Admin-Layui">讨论区</a> 回答了 <a style="color: var(--global-primary-color)"
                                            lay-href="https://gitee.com/pear-admin/Pear-Admin-Layui">夏娜</a> 提出得问题
                                    </p>
                                    <span>昨天</span>
                                </div>
                            </dd>
                            <dd>
                                <div class="dynamic-status-img"><a href="javascript:;"><img
                                            style="width: 32px;height: 32px;border-radius: 50px;"
                                            src="../../admin/images/avatar.jpg"></a></div>
                                <div>
                                    <p>就眠儀式 在 <a style="color: var(--global-primary-color)"
                                            lay-href="https://gitee.com/pear-admin/Pear-Admin-Layui">讨论区</a> 回答了 <a style="color: var(--global-primary-color)"
                                            lay-href="https://gitee.com/pear-admin/Pear-Admin-Layui">夏娜</a> 提出得问题
                                    </p>
                                    <span>昨天</span>
                                </div>
                            </dd>
                        </dl>
                    </div>
                </div>

            </div>
            <div class="layui-col layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body"
                        style="flex-direction: column;height: 160px;display: flex; align-items: center; justify-content: center;">
                        <div>
                            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="none">
                                <style>@keyframes love-face{0%,to{transform:scale(.9)}50%{transform:scale(1.2)}}</style>
                                <circle cx="12.867" cy="12" r="7" stroke="#0A0A30" stroke-width="1.5"/>
                                <path stroke="#0A0A30" stroke-linecap="round" d="M15.867 14.147l-.048.04a4.631 4.631 0 01-5.952-.04"/>
                                <path fill="var(--global-primary-color)" d="M9.792 9.65c.042.042.11.042.151 0a.694.694 0 011.122.22.667.667 0 01-.149.738l-.698.687a.5.5 0 01-.701 0l-.698-.687a.672.672 0 010-.957.694.694 0 01.973 0zm6 0c.042.042.11.042.151 0a.694.694 0 011.122.22.667.667 0 01-.149.738l-.698.687a.5.5 0 01-.701 0l-.698-.687a.672.672 0 010-.957.693.693 0 01.973 0z" style="animation:love-face 1s ease-in-out infinite both;transform-origin:center center"/>
                            </svg>
                        </div>
                        <div style="color: var(--global-primary-color);">枫桥夜泊</div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header" style="display: flex;justify-content: flex-start;align-items: center;">
                        <p style="margin-right: 5px;">公告</p>
                        <p>
                            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="30" height="30">
                                <style>@keyframes notify{0%,to{transform:rotate(0deg);transform-origin:top center}10%,90%{transform:rotate(2deg)}20%,40%,60%{transform:rotate(-6deg)}30%,50%,70%{transform:rotate(6deg)}80%{transform:rotate(-2deg)}}</style>
                                <g style="animation:notify 2s cubic-bezier(.455,.03,.515,.955) both infinite" stroke-width="1.5">
                                    <path fill="var(--global-primary-color)" d="M837.8 375.1H186.3c-16.5 0-30 13.5-30 30v404.6c0 16.5 13.5 30 30 30h651.4c16.5 0 30-13.5 30.1-30V405.1c0-16.5-13.5-30-30-30z m-35.9 377.5H215v-8h586.9v8z m0-20H215v-8h586.9v8z"></path>
                                    <path fill="#06265B" d="M787.3 887.9H781c-8.3 0-15 6.7-15 15s6.7 15 15 15h6.3c8.3 0 15-6.7 15-15s-6.8-15-15-15z"></path>
                                    <path fill="#06265B" d="M897 296.8H775.8L570.6 171.2c-3 9.8-8.5 18.6-15.7 25.6l163.4 100H305.8L471 196.6c-7.2-7-12.6-15.8-15.6-25.6L247.9 296.8H127c-24.8 0-45 20.2-45 45v531.1c0 24.8 20.2 45 45 45h555.9c8.3 0 15-6.7 15-15s-6.7-15-15-15H127c-8.3 0-15-6.7-15-15V341.8c0-8.3 6.7-15 15-15h770c8.3 0 15 6.7 15 15v531.1c0 8.3-6.7 15-15 15h-64.3c-8.3 0-15 6.7-15 15s6.7 15 15 15H897c24.8 0 45-20.2 45-45V341.8c0-24.8-20.2-45-45-45z"></path>
                                    <path fill="#ffffff" d="M313 686.2c-3.2-6.5-6.6-12-12.2-20.3l-49-73.9c-3.6-5.7-8.4-13.9-12.9-22.8 0.2 2.7 0.2 2.7 0.8 9.7 0.2 3.6 0.6 12.2 0.6 16.5v62.3c0 12.7 0.6 21.7 1.5 28.5H214c0.9-6.3 1.5-15.8 1.5-28.7v-98c0-9.9-0.4-16.7-1.5-24.5h29.6c1.7 4.8 5.1 10.4 11.6 20.1l48.1 72.4c4.6 6.8 10.6 16.7 14.8 24.3-0.8-7.4-1.3-18.8-1.3-26.8v-63.8c0-11.2-0.4-19-1.5-26.2H343c-1.1 7.6-1.5 14.6-1.5 26.2v100.5c0 10.6 0.4 17.9 1.5 24.5h-30zM477.9 687.5c-6.8-0.9-12.9-1.3-24.5-1.3h-59.3c-11.4 0-16.5 0.2-24.1 0.6 1.1-7.6 1.5-13.9 1.5-25.1V558.9c0-9.9-0.4-15.6-1.5-24.5 7.6 0.4 12.5 0.6 24.1 0.6h57.4c9.5 0 15.8-0.4 24.5-1.3v25.1c-7.2-1-13.3-1.3-24.5-1.3h-54.7v39.1H443c9.9 0 16.3-0.4 24.7-1.3v24.9c-7.8-1.1-12.9-1.3-24.7-1.3h-46.4v44.8h57c10.6 0 16.1-0.4 24.3-1.3v25.1zM617.5 686.2c-0.8-4.6-2.7-12.7-4.6-19.2l-20.3-70.7c-2.1-7.4-3.8-14.6-5.5-24.3-2.1 10.8-4 18.2-5.7 24.3L561.3 667c-2.3 8.5-3.8 14.6-4.4 19.2h-25.3c-1-4.8-1-4.8-5.1-19.6l-30.2-109.1c-3.2-11-5.1-16.9-7.6-22.6h30.4c0.4 6.5 1.3 12.2 3.4 20.5l17.7 72.4c1.3 5.9 3.4 15.6 4.6 22.2 2.5-11.8 3.8-17.1 5.3-22.4l21.1-73.3c2.3-8 3.6-14.2 4.2-19.4h23.4c0.6 4.6 2.3 12 4.4 19l21.3 73.1c1.3 4.9 2.3 8.7 5.3 23 1-4.4 1-4.4 2.1-11 0.6-3 2.1-10.4 2.5-12.2l17.7-71.6c1.9-7.2 3-15 3.2-20.3h30.4c-2.7 6.5-4.4 11.6-7.4 22.6l-30.4 108.9c-1.3 5.3-2.3 8.7-2.7 10.4-1.5 5.3-1.5 5.3-2.1 9.3l-25.6 0.1zM723.6 639.1c0.8 8.5 1.9 12.3 5.3 16.7 5.5 7.2 15.4 11.2 27.7 11.2 19 0 30.4-8.5 30.4-22.8 0-7.8-3.6-14.2-9.5-17.5-5.7-3-6.8-3.2-33.1-9.3-14.2-3.2-21.8-6.3-28.7-11.6-9.7-7.6-14.6-18-14.6-30.8 0-26.4 21.3-43.5 54-43.5 21.7 0 38 6.6 47.3 19.2 4.8 6.3 7 12 9.3 22l-27.2 3.2c-1.1-6.5-2.5-9.7-5.7-13.5-4.9-5.9-13.3-9.1-23.7-9.1-16.5 0-27.7 8.4-27.7 20.7 0 8 4.2 13.5 12.9 17.3 4.2 1.7 5.7 2.1 26.8 6.8 15 3.2 24.1 6.8 31 11.6 10.8 8 15.8 18.4 15.8 32.7 0 13.5-4.2 24.5-12 32.3-10.1 9.7-25.1 14.4-45.4 14.4-15.6 0-30.8-3.8-39.9-9.9-7.6-5.1-13.1-12.3-16.7-21.7-1.7-4.4-2.5-8-3.6-15.8l27.3-2.6z"></path>
                                </g>
                                <path fill="#06265B" d="M513 153.5m-47.4 0a47.4 47.4 0 1 0 94.8 0 47.4 47.4 0 1 0-94.8 0Z"></path>
                            </svg>
                        </p>
                    </div>
                    <div class="layui-card-body" style="line-height:40px;">
                        <p>2025-08-20 升级首页图表</p>
                        <p>2025-08-19 修改首页默认主题</p>
                        <p>2025-08-28 修改登录默认主题</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        layui.use(['layer', 'echarts', 'element', 'count'], function () {
            var $ = layui.jquery,
                layer = layui.layer,
                element = layui.element,
                count = layui.count,
                echarts = layui.echarts;

            count.up("value1", {
                time: 2000,
                num: 440,
                bit: 0,
                regulator: 50
            })

            count.up("value2", {
                time: 2000,
                num: 2363,
                bit: 0,
                regulator: 50
            })

            count.up("value3", {
                time: 2000,
                num: 63440.2,
                bit: 1,
                regulator: 50
            })

            count.up("value4", {
                time: 2000,
                bit: 2,
                num: 50.21,
                regulator: 50
            })


            // 图表1(柱状)
            let echarts1 = echarts.init(document.getElementById('echarts1'));
            let option1 = {
                title: {
                    text: '降雨量 vs 蒸发量',
                    subtext: '伪数据'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['降雨量', '蒸发量']
                },
                toolbox: {
                    show: true,
                    feature: {
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                    }
                },
                calculable: true,
                xAxis: [
                    {
                    type: 'category',
                    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
                    }
                ],
                yAxis: [
                    {
                    type: 'value'
                    }
                ],
                series: [
                    {
                    name: '降雨量',
                    type: 'bar',
                    data: [
                        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
                    ],
                    markPoint: {
                        data: [
                        { type: 'max', name: 'Max' },
                        { type: 'min', name: 'Min' }
                        ]
                    },
                    markLine: {
                        data: [{ type: 'average', name: 'Avg' }]
                    }
                    },
                    {
                    name: '蒸发量',
                    type: 'bar',
                    data: [
                        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
                    ],
                    markPoint: {
                        data: [
                        { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
                        { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
                        ]
                    },
                    markLine: {
                        data: [{ type: 'average', name: 'Avg' }]
                    }
                    }
                ]
            };
            echarts1.setOption(option1);
            // 图表2(仪表)
            let echarts2 = echarts.init(document.getElementById('echarts2'));
            let option2 = {
                title: {
                    text: '转换率',
                    x: 'center'
                },
                tooltip: {
                    formatter: '{a} <br/>{b} : {c}%'
                },
                series: [
                    {
                        name: 'Pressure',
                        type: 'gauge',
                        radius: '70%',
                        center: ['50%', '50%'],
                        progress: {
                            show: true
                        },
                        detail: {
                            valueAnimation: true,
                            formatter: '{value}%'
                        },
                        data: [
                            {
                            value: 50,
                            name: '转化率'
                            }
                        ]
                    }
                ]
            };
            echarts2.setOption(option2);
            
            setInterval(() => {
                echarts1.resize();
            }, 500);

            window.onresize = function() {
                echarts1.resize();
            }

            setInterval(() => {
                echarts2.resize();
            }, 500);

            window.onresize = function() {
                echarts2.resize();
            }
        });
    </script>
</body>

</html>